<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	
	</head>
	<body>
		
		<h3>商品列表</h3>
	 <hr>
	    <table border="1" width="100%">
	    	<thead>
					<tr>
						<th>编号</th>
						<th>标题</th>
						<th>单价</th>
						<th>操作</th>
					</tr>					
				</thead>
	    <tbody id="tbody">
				<tr>
					<td colspan="4" align="center">
						   <img src="img/src=http___img.zcool.cn_community_011ed35704c9b232f875a94481a665.gif&refer=http___img.zcool.gif" width="100">						
				
					</td>					
				</tr>	  
					<!-- 	<tr>
							<td>1</td>
							<td>名称</td>
							<td>3000</td>
							<td> <a href="#">删除</a></td>
							
						</tr> -->
						
	    </tbody>			
			</table>
			<script>
			     //自定义一个全局函数,用于向服务器提交要删除的商品的编号
					function deleteProduct( lid ) {
								console.log('即将删除商品',lid)				
					      //1
								let xhr= new XMLHttpRequest()
								//2
								xhr.open('DELETE','/v2/product/remove?lid='+lid)
								//3     
								xhr.onload = function(){
									 console.log(xhr.responseText)
								}
								//4
								xhr.send()
					}
				   //为"窗口内容加载完成"事件指定处理方法
					 //onclick、onblur、onchange、xhr.onload
					 window.onload = function(){
						    console.log('窗口中的页面内容加载完成') 
					     //向服务器发起异步的动态数据请求,获取商品数据							 					//创建对象			
							 let xhr = new XMLHttpRequest()
					     //打开连接
								xhr.open('GET','/v2/product/listbypage?pageSize=5&pageNum=3',true)
					      xhr.onload = function() {
				    //console.log( typeof(xhr.responseText))
					  //console.log( xhr.responseText)
				        //JSON反序列化: JSON字符串 => js对象
								let data = JSON.parse(xhr.responseText)
				      //console.log( typeof(data) )    //object
							//console.log( data )
							//根据data里的数据,拼接创建多个tr>td*4
							let html = ''  //用于保存要拼接的HTML片段
					    for(var i=0; i<data.length; i++){
                  let p = data[i]							
							     html +=`
							           <tr>
									         <td>${p.lid}</td>
									         <td>${p.title}</td>
									         <td>${p.price}</td>
									         <td><a href="javascript:deleteProduct(${p.lid})">删除</a></td>
									      </tr>
									`
								 }
							   //console.log(html)
								 tbody.innerHTML = html //把拼接好的字符串放置到页面中
							}
							 //发送请求
					    xhr.send()
					
					 }
			</script>
	</body>
</html>
